import { Component } from '@angular/core';

@Component({
  selector: 'avt-root',
  template: `
   <!-- <avt-button>hello</avt-button>
    <br><br>
    <avt-button >ui</avt-button>
    <ul>
      <li>
        <a href="#">avatar ui</a>
      </li>
      <li>
        <a href="#">components</a>
      </li>
    </ul> -->
    <div style="display: flex; justify-content: space-evenly">
      <app-avt-select
        [maxCountDisplay]="3"
      ></app-avt-select>
      <app-avt-select></app-avt-select>
    </div>
    <app-avt-select
      mode="multi"
      [dataSource]="[
        { name: 'will lin'},
        { name: 'michael wang'},
        { name: 'zorro zeng'},
        { name: 'loki cheng'},
        { name: 'zhan san'},
        { name: 'wang wu'},
        { name: 'li si'},
        { name: 'jack'},
      ]"
      [(selectedValue)]="selectedValue"
      labelField="name"
      valueField="name"
    ></app-avt-select>
    <router-outlet></router-outlet>
  `,
  styles: [
    `
      :host {
        display: block;
        min-width: 100vw;
        min-height: 100vh;
      }
      @baseColor: #546e95;
      ul {
        li > a {
          color: @baseColor;
        }
      }
    `
  ]
})
export class AppComponent {
  title = 'avatar-ui';
  selectedValue = [];
}
